<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>0419的笔记</title>
</head>
<body>
<h3>对CSS的收尾、JS的引入以及浏览器插件的制作</h3>
<h2>CSS之盒子模型</h2><p></p>
<p>这里老师给我们介绍了盒子模型，主要是margin与padding之间的差异，并用了一张图来具体说明。</p>

<p>示例网页如下</p>
<p><a href="box-model.html" >盒子模型的示例网页</a></p>
<h3>CSS之flex布局</h3>
<p>
  在讲完盒子模型之后，老师便进一步来讲flex布局。
  flex布局是一种很经典的浏览器页面布局方式，在学习了它之后我们能够了解到大部分浏览器页面是如何实现它们的布局效果。
</p>
<p>
  其中让我比较感兴趣的是如何在页面缩小的情况下使元素的大小不变，这就要用到flex-shrink属性，该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  将1改为0后即使空间缩小项目大小也会保持不变。
  还有类似很多例子均在老师发的代码中有所体现。
</p>
<h3>CSS之动画</h3>
<p>这里我们将学习用CSS制作一些简单初步的动画。</p>
<p>我们要运用到的是CSS transform 属性 - 可以对指定元素进行旋转、缩放、倾斜或平移等操作，通过对其的改变我们就可以让页面中的元素“动”起来。当然这只是最初步的。</p>
<p>想要做出好动画，必须先定义一个动画名称（animation-name:），还有动画的持续时间（animation-duration:），当然关键帧也少不了，要在@keyframes后加上你的动画名称，再在“{}”中填入你要改变的效果。</p>
<h3>JS初见</h3>
<p>先来认识一下JS可以写的位置</p>
<ol>
  <li>html 标签中的属性，类似 css 的 style 属性</li>
  <li>script 标签，类似 css 的 style 标签</li>
  <li>外部的.js文件，类似 css 外部的 .css文件</li>
</ol>
<p>这里主要讲了script标签与onclick（鼠标点击后执行）效果和alert(弹窗）效果。</p>
<p>再对.js文件进行展开，console.log()能使括号中的内容在控制台中显示，顺便一提，很多知名网站的招聘链接可以在控制台中找到。</p>
<h3>最后来到制作浏览器插件</h3>
<p>这里我们参考了谷歌的浏览器插件制作文献，比较轻松就能做出自己的第一个浏览器插件，随后还白嫖了老师写的bilibili视频倍数调节插件。</p>
<p>所制作的浏览器插件与老师提供的均在extentions文件夹。</p>
</body>
</html>